<template>
   <div class="page-container">
    <section>
      <el-upload action="/upload" :on-change="uploadFile" multiple :show-file-list="true" :file-list="fileList" list-type="picture" :auto-upload="false">
        <el-button>添加附件（可多选）</el-button>
      </el-upload>
    </section>

    <section>
      <div>其他信息数据：</div>
      <div><el-input v-model="form.otherInfo"></el-input></div>
    </section>

    <section>
      <el-button type="primary" @click.stop="uploadFilesAndFilesInfo">上传附件及其他信息</el-button>
    </section>
   </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      fileList: [],
      form: {
        otherInfo: "其他信息"
      }
    };
  },
  computed: {},
  mounted() {},
  // 方法集合
  methods: {
    // 附件上传
    uploadFile(file, fileList) {
      this.fileList = fileList;
    },
    // 上传附件及其他信息
    uploadFilesAndFilesInfo() {
      let formData = new FormData();

      this.fileList.forEach(item => {
        formData.append("file", item.raw);
      });

      let otherInfoData = JSON.stringify({ ...this.form });

      // 这里包装 可以直接转换成对象
      formData.append(
        "otherInfoData",
        new Blob([otherInfoData], { type: "application/json" })
      );

      setTimeout(() => {
        // 模拟传递formData数据到后端的操作
        for (var key of formData.keys()) {
          console.log("key:" + key + "，value:" + formData.get(key));
        }
      }, 1000);
    }
  }
};
</script>

<style lang='less' scoped>
</style>
